<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2025/3/27
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - OA办公系统</title>
    <link href="${pageContext.request.contextPath}/css/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/all.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.7.1.js"></script>

</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
<div class="container mx-auto fade-in">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">员工管理</h1>
        <button id="addEmployeeBtn" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center btn-hover-effect">
            <i class="fas fa-user-plus mr-2"></i>
            <span>添加员工</span>
        </button>
    </div>

    <!-- 员工列表 -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">职位</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">入职日期</th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
            </thead>
            <tbody id="employeeTableBody" class="bg-white divide-y divide-gray-200">
            <!-- 员工数据行 -->
            </tbody>
        </table>
    </div>

    <!-- 分页组件 -->
   <%-- <div class="mt-6">
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            <button id="prevPageBtn" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Previous</span>
                <i class="fas fa-angle-left"></i>
            </button>
            <button id="nextPageBtn" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                <span class="sr-only">Next</span>
                <i class="fas fa-angle-right"></i>
            </button>
        </nav>
    </div>--%>
</div>

<!-- 模态框 -->
<div id="employeeModal" class="fixed inset-0 flex items-center justify-center bg-gray-500 bg-opacity-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg w-full max-w-2xl">
        <div class="flex justify-between items-center mb-4">
            <h2 id="modalTitle" class="text-2xl font-bold text-gray-800">添加员工</h2>
            <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <form id="employeeFormContent">
            <input type="hidden" id="employeeId" name="employeeId">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <input type="text" id="name" name="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="position" class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                    <input type="text" id="position" name="position" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                    <input type="text" id="department" name="department" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
                <div>
                    <label for="hireDate" class="block text-sm font-medium text-gray-700 mb-1">入职日期</label>
                    <input type="date" id="hireDate" name="hireDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                </div>
            </div>
            <div class="flex justify-end mt-4">
                <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">保存</button>
            </div>
        </form>
    </div>
</div>

<script>
    // 初始化加载员工数据
    $(function (){
        loadEmployees(1);
    })
    /*let currentPage = 1;
    const pageSize = 10;*/

    document.getElementById('addEmployeeBtn').addEventListener('click', function() {
        document.getElementById('employeeModal').classList.remove('hidden');
        document.getElementById('modalTitle').textContent = '添加员工';
        document.getElementById('employeeFormContent').reset();
        document.getElementById('employeeId').value = '';
    });

    document.getElementById('closeModalBtn').addEventListener('click', function() {
        document.getElementById('employeeModal').classList.add('hidden');
    });

    document.getElementById('employeeFormContent').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        const url = document.getElementById('employeeId').value ? 'employeeUpdate.jsp' : 'employeeAction.jsp';
        fetch(url, {
            method: 'POST',
            body: formData
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadEmployees();
                    document.getElementById('employeeModal').classList.add('hidden');
                    this.reset();
                }
            });
    });

    /*document.getElementById('prevPageBtn').addEventListener('click', function() {
        if (currentPage > 1) {
            currentPage--;
            loadEmployees();
        }
    });

    document.getElementById('nextPageBtn').addEventListener('click', function() {
        currentPage++;
        loadEmployees();
    });*/

    function loadEmployees(currentPage) {
        $.ajax({
            //请求地址
            url: "${pageContext.request.contextPath}/user.action",
            type: "get",
            //请求参数
            data: {
                "action": "list",
                "currentPage": currentPage,
            },
            //返回数据类型
            dataType: "json",
            success: function (data) {
                console.log(data);
                $('#tbody').empty();
                for (const emp of data.data) {
                    let tr = `<tr>
                                <td>` + emp.id + `</td>
                                <td>` + emp.userId + `</td>
                                <td>` + emp.name + `</td>
                                <td>` + emp.position + `</td>
                                <td>` + emp.department + `</td>
                                <td>` + emp.hireDate + `</td>
                                <td>` + emp.leaveDate + `</td>
                                <td>` + emp.status + `</td>
                                <td>
                                    <button class="btn edit" onclick="editUser(`+emp.id+`)">修改</button>
                                    <button class="btn delete" onclick="deleteUser(`+emp.id+`)">删除</button>
                                </td>
                               </tr>`;
                    $('#tbody').append(tr);
                }
                //分页控件
                $('.pagination').empty();
                let firstButton = `<button onclick="pageList(1)">首页</button>`;

                $('.pagination').append(firstButton);
                if (data.currentPage > 1) {
                    let upButton = `<button onclick="pageList(`+(data.currentPage-1)+`)">上一页</button>`;
                    $('.pagination').append(upButton);
                }else {
                    let upButton = `<button disabled> 上一页</button>`;
                    $('.pagination').append(upButton);
                }
                if (data.currentPage < data.totalPage) {
                    let downButton = `<button onclick="pageList(`+(data.currentPage+1)+`)">下一页</button>`;
                    $('.pagination').append(downButton);
                }else {
                    let downButton = `<button disabled> 下一页</button>`;
                    $('.pagination').append(downButton);
                }
                let lastButton = `<button onclick="pageList(`+data.totalPage+`)" >末页</button>`;

                $('.pagination').append(lastButton);
            }
        })
        /*fetch(`employeeData.jsp?page=${currentPage}&size=${pageSize}`)
            .then(response => response.json())
            .then(data => {
                const tableBody = document.getElementById('employeeTableBody');
                tableBody.innerHTML = '';
                data.employees.forEach(employee => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${employee.name}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.position}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.department}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.hireDate}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button class="text-indigo-600 hover:text-indigo-900" onclick="editEmployee(${employee.id})">编辑</button>
                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteEmployee(${employee.id})">删除</button>
                        </td>
                    `;
                    tableBody.appendChild(row);
                });
            });*/
    }

    function editEmployee(id) {
        fetch(`employeeDetails.jsp?id=${id}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('employeeModal').classList.remove('hidden');
                document.getElementById('modalTitle').textContent = '编辑员工';
                document.getElementById('employeeId').value = data.id;
                document.getElementById('name').value = data.name;
                document.getElementById('position').value = data.position;
                document.getElementById('department').value = data.department;
                document.getElementById('hireDate').value = data.hireDate;
            });
    }

    function deleteEmployee(id) {
        if (confirm('确定要删除该员工吗？')) {
            fetch(`employeeDelete.jsp?id=${id}`, {
                method: 'DELETE'
            }).then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadEmployees();
                    }
                });
        }
    }


</script>
</body>
</html>